<template>
  <div class="overview_index flex_between_aligncenter">
    <!-- <p>{{ info }}</p> -->
    <usedRate title="CPU" />
    <usedRate title="内存" />
    <vm />
    <assignRate title="CPU分配" />
    <assignRate title="内存分配" />
    <assignRate title="存储" />
    <div class="flex" style="width: 100%">
      <vulnerability title="漏洞统计" />
      <startupDuration title="开机时长" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getHostListDetail } from "@/api/hostMgt";
import { useRoute } from "vue-router";
import usedRate from "./overviewInfo/usedRate.vue";
import vm from "./overviewInfo/vm.vue";
import assignRate from "./overviewInfo/assignRate.vue";
import vulnerability from "./overviewInfo/vulnerability.vue";
import startupDuration from "./overviewInfo/startupDuration.vue";
const route = useRoute();
const { id } = route.params;
const info = ref(null);
// 获取列表
const fetchDetailData = async () => {
  try {
    const { data } = await getHostListDetail(id);
    info.value = data;
  } catch (err) {
    console.log(err);
  }
};
onMounted(() => {
  fetchDetailData();
});
</script>

<style lang="scss" scoped>
.overview_index {
  flex-wrap: wrap;
  width: 100%;
}
</style>
